<template>
  <div class="app-container">
    <el-card class="box-card">
      <h3>商品介绍</h3>
      <el-form ref="cgGood" :rules="rules" :model="cgGood" label-width="150px">
        <el-form-item label="商品名称" prop="goodsName">
          <el-input v-model="cgGood.goodsName" />
        </el-form-item>
        <el-form-item label="商品单价" prop="goodsPrice">
          <el-input v-model="cgGood.goodsPrice" placeholder="0.00">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="市场价" prop="goodsMarketPrice">
          <el-input v-model="cgGood.goodsMarketPrice" placeholder="0.00">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <!-- <el-form-item label="商品个数" prop="goodsCount">
          <el-input v-model="cgGood.goodsCount" placeholder="请写阿拉伯数字" />
        </el-form-item> -->
        <el-form-item label="商品图片">
          <el-upload
            :action="uploadPath"
            :show-file-list="false"
            :headers="headers"
            :on-success="uploadPicUrl"
            class="avatar-uploader"
            accept=".jpg, .jpeg, .png, .gif"
          >
            <img v-if="cgGood.goodsImg" :src="cgGood.goodsImg" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
        </el-form-item>
        <el-form-item label="买家选择框">
          <el-select v-model="cgGood.buyUserId" filterable placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.mobile + '-' + item.userRealName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
    </el-card>

    <div class="op-container">
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handlePublish">添加</el-button>
    </div>
  </div>
</template>

<script>
import { addCgItem } from '@/api/shop/order'
import { listUser } from '@/api/shop/order'
import { getToken } from '@/utils/auth'
import { uploadPath } from '@/api/upload'

export default {
  name: 'CgGood',
  data() {
    return {
      options: [],
      // 商品表单参数
      cgGood: {
        goodsName: '',
        goodsMarketPrice: '', // 市场价
        goodsPrice: '',
        buyUserId: '',
        goodsImg: '',
        goodsCount: 1,
        saleUserId: '',
        status: 1,
        saleStatus: ''
      },
      rules: {
        goodsName: [
          { required: true, message: '商品名称不能为空', trigger: 'blur' }
        ],
        goodsPrice: [
          { required: true, message: '商品单价不能为空', trigger: 'blur' }
        ],
        goodsImg: [
          { required: true, message: '商品图片不能为空', trigger: 'blur' }
        ],
        goodsCount: [
          { required: true, message: '商品数量不能为空', trigger: 'blur' }
        ],
        goodsMarketPrice: [
          { required: true, message: '市场价不能为空', trigger: 'blur' }
        ]
      },
      // 上传文件路径
      uploadPath,
      // 上传路径header设置
      headers: { Authorization: 'Bearer ' + getToken() }
    }
  },
  created() {
    this.init()
  },

  methods: {
    // 初始化
    init: function() {
      this.getOptions()
    },
    // 获取买家
    async getOptions() {
      const {
        map: { userList }
      } = await listUser()
      this.options = userList
    },
    // 关闭当前页面
    handleCancel: function() {
      this.$router.push({ path: '/shop/goods' })
    },
    // 上架商品
    handlePublish: function() {
      this.cgGood.saleUserId = 96
      if (!this.cgGood.buyUserId) {
        this.cgGood.status = 1
        this.cgGood.saleStatus = null
      } else {
        this.cgGood.status = 2
        this.cgGood.saleStatus = 0
      }
      addCgItem(this.cgGood).then(res => {
        if (res.code === 200) {
          this.$message.success('操作成功')
          this.cgGood = {
            goodsName: '',
            goodsPrice: '',
            buyUserId: '',
            goodsImg: '',
            goodsCount: 1,
            saleUserId: '',
            status: 1,
            saleStatus: ''
          }
          return
        }
        this.$message.error('操作失败，请重新添加')
      })
    },
    // 上传商品图片
    uploadPicUrl: function(response) {
      console.log(response)
      if (response.code === 200) {
        this.cgGood.goodsImg = response.map.url
      }
    }
  }
}
</script>
<style scoped>
.op-container {
  display: flex;
  justify-content: center;
}
</style>
